
<template>
  <el-container class="needSetting">
    <el-main>
      <pure-table-area>
        <template #header>
          <div class="flex ">
            <ProcessPanel
              :key="'demand'"
              :active-button="defaultCode"
              active-panel-name="demand"
              :show-header="showDemanPanel"
              @click="changeProcess"
            >
              <el-row class="demand-main-header p-16">
                <el-col :span="1">
                  <JYWCaretButton @click="showDemanPanel = !showDemanPanel" />
                </el-col>
                <el-col :span="11">
                  <search
                    v-model="searchValue"
                    class="base-margin-right"
                    style="width:200px"
                  />
                </el-col>
                <el-col :span="12" style="text-align: right">
                  <!-- <pure-button size="mini" type="wire-frame" label="导出" /> -->
                  <pure-button
                    size="mini"
                    label="新增需求"
                    @click="addNew"
                  />
                </el-col>
              </el-row>
            </ProcessPanel>
          </div>
        </template>
        <template #body>
          <div ref="tableWrapper" class="table-wrapper">
            <el-table
              ref="table"
              v-loading="loading"
              :data="data"
              border
              :cell-style="tableStyle.cellStyle"
              :empty-text="emptyText"
              :max-height="tableMaxHeight"
              @filter-change="filterChange"
            >
              <el-table-column
                v-for="(v, i) in filterTableColumn"
                :key="v.property + i"
                :label="v.label"
                :type="v.type"
                :property="v.property"
                :width="v.w"
                align="center"
                :fixed="v.fixed"
                :formatter="v.computed"
                :column-key="v.property"
                :filters="v.filter"
                show-overflow-tooltip
              >
                <template v-if="v.slot" #default="scope">
                  <tableOptionsMenu
                    :data="scope.row"
                    @click="clickOptions($event, scope.row)"
                  />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
        <template #footer>
          <el-pagination
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            :layout="layout"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </template>
      </pure-table-area>
    </el-main>
  </el-container>
</template>

<script>
import { mixins_base, mixins_project_index, } from '@/minxins/project/index';
import mixin from './mixin';
import ProjectAPI from '@/apis/project';
import { arrayToString, } from '@/utils/common';
import tableStyle from '../style/table';
import PaginationTable from '@/minxins/common/paginationTable';
import ProcessPanel from '@/views/project/components/navigationPanel/processPanel.vue';
import Assign from '@/views/project/components/panelsGroup/assign.vue';
import drawerWidth from '@/views/project/common/width/drawer';
import dialogWidth from '@/views/project/common/width/dialog';
export default {
  name: 'XmXqgl',
  components: {
    ProcessPanel,
    tableOptionsMenu: () => import('./components/optionsMenu.vue'),
    Search: () => import('@/components/input/search.vue'),
    // eslint-disable-next-line vue/no-unused-components
    AddNewPanel: () => import('../components/panelsGroup/addNew.vue'),
    // eslint-disable-next-line vue/no-unused-components
    EditLookOrder: () => import('../components/panelsGroup/editLookOrder.vue'),
    // eslint-disable-next-line vue/no-unused-components
    Research: () => import('../components/panelsGroup/research.vue'),
    // eslint-disable-next-line vue/no-unused-components
    Review: () => import('../components/panelsGroup/review.vue'),
    // eslint-disable-next-line vue/no-unused-components
    NeedAssign: () => import('./components/needAssign.vue'),
    // eslint-disable-next-line vue/no-unused-components
    ToOrder: () => import('./components/toOrder.vue'),
    // eslint-disable-next-line vue/no-unused-components
    End: () => import('../components/task/end.vue'),
  },

  mixins: [mixins_base, mixins_project_index, mixin, PaginationTable],
  data() {
    return {
      tableStyle,
      loading: true,
      defaultCode: 'demand',
      showDemanPanel: true,
      listApi: ProjectAPI.demand.getNeedList,
      componentName: '',
      panelArguments: {
        demand: {
          width: drawerWidth.small_px,
          props: {
            title: '需求信息',
            hiddenSaveButton: true,
            showFooter: true,
            showTimeLine: true,
          },
        },
        research: {
          width: drawerWidth.larger_pr,
          props: {
            title: '调研',
            hiddenSaveButton: true,
            showFooter: true,
          },
        },
        review: {
          width: drawerWidth.larger_pr,
          props: {
            title: '评审',
            hiddenSaveButton: true,
            showFooter: true,
          },
        },
      },
    };
  },
  computed: {
    filterTableColumn() {
      return this.tableColumn.filter((e) => e.show);
    },
  },
  activated() {
    this.renderRouteQueryParamsPanel();
  },
  mounted() {
    this.DISPATCHT_GET_USER_LIST();
    this.queryCondition.code = this.defaultCode;
    this.currentPage = 1;
    this.queryCondition.pageNum = this.currentPage;
    this.fetchData();
    // 注入 发起投票 撤销投票 回调事件
    this.SET_INJECT_EVENT({ name: 'submitVote', fun: this.fetchData, });
  },

  methods: {
    onDone() {
      this.fetchData();
      this.FETCH_PERFORM_EVENT({ name: 'process', });
    },

    /**
     * 针对查看操作的处理
     */
    perviewOptions(type) {
      this.SET_PANCEL_DISABLED({ name: 'needInfo', disabled: true, });
      this.SET_PANCEL_DISABLED({ name: 'researchInfo', disabled: true, });
      this.SET_PANCEL_DISABLED({ name: 'researchView', disabled: true, });
      if (
        [
          'demand_init',
          'demand_inv',
          'end_termination',
          null
        ].includes(type)
      ) {
        this.panelArguments.demand.props.showFooter = false;
        this.panelArguments.demand.props.showTimeLine = true;
        this.panelArguments.demand.width = drawerWidth.small_px;

        this.renderPanelFn(
          'AddNewPanel',
          this.panelArguments.demand.width,
          this.panelArguments.demand.props
        );
      } else if (
        [
          'demand_inv_review_next',
          'end_project_order',
          'end_inv_reject',
          'item_establish',
          'demand_inv_review'
        ].includes(type)
      ) {
        if (type === 'demand_inv_review') {
          this.panelArguments.research.props.title = '评审信息';
        } else if (type === 'item_establish') {
          this.panelArguments.research.props.title = '立项信息';
        }
        this.panelArguments.research.props.showFooter = false;
        this.renderPanelFn(
          'Research',
          this.panelArguments.research.width,
          this.panelArguments.research.props
        );
      }
    },
    renderRouteQueryParamsPanel() {
      if (this.$route.params.itemCode) {
        this.clickOptions('search', this.$route.params);
      }
    },
    optionsDelete(row) {
      this.$confirm(`是否删除「${row.title}」?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        try {
          await ProjectAPI.demand.del(row.id);
          this.onDone();
        } catch (e) {
          this.$message.error(e);
        }
      }).catch(() => {});
    },
    optionsBack(row) {
      this.$confirm('此操作不可逆, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        try {
          await ProjectAPI.base.backDemand(row.itemCode);
          this.onDone();
        } catch (e) {
          this.$message.error(e);
        }
      }).catch(() => {});
    },
    optionsEnd(row) {
      this.$dialog({
        title: '终止',
        subTitle: `项目编号:${row.itemCode}`,
        position: 'center',
        width: dialogWidth.small_px,
        component: () => <End onDone={this.onDone} />,
      });
    },
    optionsToOrder() {
      this.$dialog({
        title: '转工单',
        width: dialogWidth.small_px,
        position: 'center',
        component: () => <ToOrder onDone={this.onDone} />,
      });
    },

    async clickOptions(v, r) {
      this.SET_ITEM_CODE(r.itemCode);
      this.SET_RESEARCH_INFO({ ...r, });

      if (['del', 'back', 'end', 'toOrder'].includes(v)) {
        if (v === 'del') {
          this.optionsDelete(r);
        } else if (v === 'back') {
          this.optionsBack(r);
        } else if (v === 'end') {
          this.optionsEnd(r);
        } else if (v === 'toOrder') {
          this.optionsToOrder();
        } else {
        //
        }
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      try {
        this.SET_PERVIEW(false);
        await this.FETCEH_RESET_PANCEL_DISABLED_OPTIONS();
        const result = await ProjectAPI.base.getAllProjectData(r.itemCode);
        await this.FETCH_PANEL_DATA(result);
        loading.close();
        switch (v) {
        // 编辑状态
          case 'edit':
            this.panelArguments.demand.props.showFooter = true;
            this.panelArguments.demand.props.showTimeLine = true;
            this.panelArguments.demand.width = drawerWidth.small_px;
            this.renderPanelFn(
              'AddNewPanel',
              this.panelArguments.demand.width,
              this.panelArguments.demand.props
            );
            break;
          case 'search':
            this.perviewOptions(r.showState);
            break;
          case 'distribute':
            this.SET_PANCEL_DISABLED({ name: 'needInfo', disabled: true, });
            this.renderPanelFn(Assign, drawerWidth.larger_pr, { });
            break;
          case 'demand_inv':
          // this.SET_PERVIEW(true);
            break;
          case 'research':
            this.SET_PANCEL_DISABLED({ name: 'needInfo', disabled: true, });
            this.panelArguments.research.props.showFooter = true;
            this.renderPanelFn(
              'Research',
              this.panelArguments.research.width,
              this.panelArguments.research.props
            );
            break;
          case 'review':
            this.SET_PANCEL_DISABLED({ name: 'needInfo', disabled: true, });
            this.SET_PANCEL_DISABLED({ name: 'researchInfo', disabled: true, });
            this.renderPanelFn(
              'Review',
              this.panelArguments.review.width,
              this.panelArguments.review.props
            );
            break;
        }
      } catch (error) {
        this.$message.error(error);
        loading.close();
      }
    },
    /**
     * 新增需求
     */
    async addNew() {
      this.SET_ITEM_CODE('');
      await this.FETCH_PANEL_DATA({});

      this.SET_PANCEL_DISABLED({ name: 'needInfo', disabled: false, });
      this.SET_PANCEL_EDIT({ name: 'needInfo', edit: false, });
      this.panelArguments.demand.width = drawerWidth.mini_px;

      this.panelArguments.demand.props.showFooter = true;
      this.panelArguments.demand.props.showTimeLine = false;
      this.renderPanelFn(
        'AddNewPanel',
        this.panelArguments.demand.width,
        this.panelArguments.demand.props
      );
    },

    /**
     * 渲染各种面板
     */
    renderPanelFn(componentName, width, props) {
      const self = this;
      this.$drawer({
        width: width,
        component: () => {
          return self.$createElement(componentName, {
            props: props,
            on: {
              done: () => {
                self.onDone();
              },
            },

          });
        },
      });
    },

    /**
     * 流程图的点击
     */
    changeProcess(type) {
      this.queryCondition.code = type === 'demandStand' ? 'stand' : type;
      this.currentPage = 1;
      this.queryCondition.pageNum = this.currentPage;
      this.fetchData();
    },

    filterChange(val) {
      for (const i in val) {
        if (i === 'itemType') {
          this.queryCondition['itemSource'] = arrayToString(val[i]);
        } else {
          this.queryCondition[i] = arrayToString(val[i]);
        }
      }
      this.currentPage = 1;
      this.queryCondition.pageNum = this.currentPage;

      this.fetchData();
    },
  },
};
</script>

<style lang="scss" scoped>
.demand-container {
  background: rgb(255, 255, 255);
  // margin-left: 12px;
}
.demand-aside {
  background: #fff;
}
.pagination-container {
  text-align: right;
  margin: 16px 24px 0 0;
}
.demand-main-header {
  line-height: 60px;
  height: 60px;
  min-height: 60px;
}
.p-16 {
  padding: 0 16px;
}
.dialog-panel {
  display: flex;
  justify-content: flex-end;
  height: 100%;
}
</style>
